<!--公共头部-->
{template 'aitimt/common/header'}
	<style>
		* {touch-action: pan-y;}
		body{background-color: #FFFFFF;}
		.mui-control-content {background-color: white;}
		.mui-control-content .mui-loading {margin-top: 3.125rem;}
		.mui-table-view .mui-media-object{height: 6.25rem;max-width: 8.125rem;}
		.mui-bar-nav{position: absolute;background-color: #e94709;height: 3rem;}
		.top-content{position: absolute;width: 100%;font-size:0.625rem;}
		.top-content img{width: 100%;}
		.top-logo {position: absolute;width: 10%;top: 0.625rem;}
		.top-message{position: absolute;width: 10%;right: 0;top: 0.3125rem;}
		.top-return {position: absolute;width: 10%;top: 13px;}
		.top-return img{width: 45%;}
		.mui-input-row{overflow: unset;left: 10%;}
		.mui-search input[type=search] {background-color: #f0774a;width: 70%;border-radius: 3.125rem;height:35px;color: #ffffff;}
		.mui-active::before{color: #FFFFFF;}
		.mui-search .mui-placeholder{line-height: 2.5rem;font-size: 0.5375rem;width: 45%;color: #FFFFFF;}
		.search-icon{background-color: #fad6c8;position: absolute;top: 0.375rem;right: 30%;width: 15%;text-align: center;border: 0;height: 35px;color: #e94709;border-radius: 1.25rem;overflow: hidden;}
		.mui-slider .mui-slider-group .mui-slider-item{width: 105%;padding-right: 1.25rem;}
		.mui-slider .mui-slider-group .mui-slider-item img{width: 90%;margin-top:4% ;margin-left: 5%;border-radius: 1.25rem;}
		.mui-slider{margin-top:3rem ;z-index: 15;overflow: unset;}
		.mui-slider-indicator{bottom: -1.25rem;}
		.mui-slider-indicator .mui-active.mui-indicator{background: #ea4609;}
		.mui-slider-indicator .mui-indicator{background: #ffcebd;}
		.mui-indicator .mui-active{background-color:#000000;}
		.mui-search .mui-placeholder{color: #FFFFFF;}
		.mui-search .mui-placeholder .mui-icon{color: #FFFFFF;line-height: 25px;margin-left: -100px;}
		.mui-slider-indicator.mui-segmented-control .mui-control-item {border-left:1px solid #c1c1c1 ;padding: 0 22.5%;color: #585858;}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;border-bottom: 0;}
		.mui-bar-tab .mui-tab-item.mui-active{color: #ea4609;}
		.mui-bar-nav~.mui-content{margin-bottom: 10%;margin-top: 15%;padding: 0}
		.mui-table-view .mui-media-object{max-width: 40%;}
		.mui-content{background-color: #FFFFFF;}
		.addtime{padding-top: 0.625rem;font-size: 0.625rem;}
		.hot-recom{background: #FFFFFF;display: inline-block;}
		.hot-list,.wonder-list{margin-left: 5%;font-size: 10px;}
		.hot-list p,.wonder-list p{font-size: 10px;}
		.hot-more{color: #8f8f94;}
		.hot-item {overflow:hidden;width: 45%;float: left;margin-right: 5%;}
		.hot-item video{width: 100%;height: 8rem;}
		.wonder-more{color: #8f8f94;}
		.wonder-item {width: 100%;margin-right: 5%;}
		.wonder-item video{width: 95%;height: 8rem;}
		.mui-icon{font-size: 18px;}
		.mui-content{position: absolute;width: 100%;}
		.bottom-remind{width: 100%;text-align: center;padding-top: 10%;padding-bottom: 20%;font-size: 15px;color: #969696;}
		.hot-item-bg{position: absolute;width: 43%;height: 10%;margin-top: -40%;}
		.wonder-item-bg{width: 95%;height: 18%;position: absolute;margin-top: -45%;}
		.mui-input-row.mui-search.mui-active::before{display: none}
		.selectList{width: 60%;}
		.selectList p{font-size: 11px;border-bottom: 1px solid #EEEEEE;z-index: 10}
		.wonder-search{display: none}
		.mui-search.mui-active input[type=search] {font-size: 12px;}
	</style>
		<header class="mui-bar mui-bar-nav">
			<div class="top-content">
				<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
				<div class="mui-input-row mui-search">
					<input type="search" placeholder="搜索视频" list="cityList" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this, 'cityList')" />
					<div class="picture_click dropDowns" style=""></div>
					<div id="cityList" class="selectList">

					</div>
					<button type="button" class="search-icon" onclick="search(id,'btn')">搜索</button>
				</div>
			</div>
		</header>
	<div class="mui-content">

		<div class="hot-recom">
			<p style="padding: 2% 5% ;font-size: 13px;background: #eeeeee;">
				<span class="hot-title">热门推荐</span>
				<a href="#" class="hot-more"><span  style="float: right;">更多></span>	</a>
			</p>
			<div class="hot-list">
				{loop $video $item}
				{if $item['recom']==1}
				<div  class="hot-item">
					<video controls="controls" poster="{$item['img']}">
						<source src="{if strpos($item['file_path'],'http')}{$item['file_path']}{else}{php echo tomedia($item['file_path'])}{/if}">
					</video>
						<p>
							<span>{$item['title']}</span>
							<span style="float: right;" id="hothit{$item['id']}">
							<span class="mui-icon mui-icon-videocam"></span>{$item['hits']}</span>
						</p>
					<div class="hot-item-bg" onclick="hits({$item['id']})"></div>
				</div>
				{/if}
				{/loop}
			</div>

		</div>
		<div class="wonder-recom">
			<p style="padding: 2% 5% ;font-size: 13px;background: #eeeeee;">
				<span class="wonder-title">精彩播放</span>
				<a href="#" class="wonder-more"><span  style="float: right;">更多></span>	 </a>
			</p>
			<div class="wonder-list">
				{loop $video $item}
				<div  class="wonder-item">
					<video controls="controls" poster="{$item['img']}">
						<source src="{if strpos($item['file_path'],'http')}{$item['file_path']}{else}{php echo tomedia($item['file_path'])}{/if}">
					</video>
					<p style="width: 95%;">
						<span>{$item['title']}</span>
						<span style="float: right;" id="wonhit{$item['id']}">
							<span class="mui-icon mui-icon-videocam"></span>{$item['hits']}</span>
					</p>
					<div class="wonder-item-bg" onclick="hits({$item['id']})"></div>
				</div>
				{/loop}
			</div>
			<div class="bottom-remind">已显示全部内容</div>
		</div>
		<div class="wonder-search" >
			<div class="wonder-list">
				<div  class="wonder-item" id="search-list">

				</div>
			</div>
		</div>
	</div>
<!-- 公共底部start -->
{template 'aitimt/common/nav'}
<!-- 公共底部end -->
<script>
    $(document).ready(function(){
    });
    $("input").focus(function(){
        $('#bar').css('display','none');
        $('.mui-content').css('display','none');
        $('.selectList').css('display','none');
        $('.selectList').css('opacity','1');
    });

    $("input").blur(function(){
        $('#bar').css('display','table');
        $('.mui-content').css('display','block');
        $('.selectList').css('opacity','0');
    });
    mui('.mui-bar').on('tap','a',function(){
        document.location.href=this.href;
    })
	function search(id,type) {
        $('.mui-placeholder').css('display','none');
        $(' input[type=search]').css('font-size','12px');
        $(' input[type=search]').css('text-align','unset');

        var listArr=eval('{php echo json_encode($video);}');
       var result='';
      var text=$('#cityName').val();
        $.each(listArr, function(index, item){
          if(type=='btn'){
              if (item.title==text) {
                  var path='http://test.18bang.cn/attachment/'+item.file_path;
                  result='<div  class="wonder-item">\n' +
                      '     <video controls="controls">\n' +
                      '      <source src='+path+'>\n' +
                      '     </video>\n' +
                      '     <p style="width: 95%;">\n' +
                      '      <span>'+item.title+'</span>\n' +
                      '      <span style="float: right;" id="wonhit'+item.id+'">\n' +
                      '       <span class="mui-icon mui-icon-videocam"></span>'+item.hits+'</span>\n' +
                      '     </p>\n' +
                      '     <div class="wonder-item-bg" onclick="hits('+item.id+')"></div>\n' +
                      '    </div>';
			  }
		  }else {
              if(item.id==id){
                  var path='http://test.18bang.cn/attachment/'+item.file_path;
                  result='<div  class="wonder-item">\n' +
                      '     <video controls="controls">\n' +
                      '      <source src='+path+'>\n' +
                      '     </video>\n' +
                      '     <p style="width: 95%;">\n' +
                      '      <span>'+item.title+'</span>\n' +
                      '      <span style="float: right;" id="wonhit'+item.id+'">\n' +
                      '       <span class="mui-icon mui-icon-videocam"></span>'+item.hits+'</span>\n' +
                      '     </p>\n' +
                      '     <div class="wonder-item-bg" onclick="hits('+item.id+')"></div>\n' +
                      '    </div>';
              }
		  }
        })

        document.getElementById('search-list').innerHTML=result;
        $('.wonder-recom').css('display','none');
        $('.hot-recom').css('display','none');
        $('.wonder-search').css('display','block');
    }

    function fuzzySearch(listId) {
        var that = this;
        //初始化下拉框
        initSearchInput(that, listId);
        var listArr=eval('{php echo json_encode($video);}');

        var aa=$('#' + listId);

        //遍历数组，创建元素默认显示
        $('#' + listId).html('');
        $.each(listArr, function(index, item){
            var divStr = '<div onclick="search('+item.id+')" id='+item.id+'>'+item.title+'</div>';
            $('#' + listId).append(divStr);
        })

        //current用来记录当前元素的索引值
        var current = 0;
        //匹配文本框中输入的字符串
        var showList = searchText(that, listArr, listId);

        bindFun();

        //为文本框绑定键盘引起事件
        $(this).keyup(function(e){
            //如果输入空格自动删除
            this.value=this.value.replace(' ','');
            //列表框显示
            $('#' + listId).show();
            if(e.keyCode == 38) {
                //up
                current --;
                if(current <= 0) {
                    current = 0;
                }
            }else if(e.keyCode == 40) {
                //down
                current ++;
                if(current >= showList.length) {
                    current = showList.length -1;
                }

            }else if(e.keyCode == 13) {
                //enter
                //如果按下回车，将此列表项的内容填充到文本框中
                $(that).val(showList[current].title);
                //下拉框隐藏
                $('#' + listId).hide();

            }else {
                //other
                showList = searchText(that, listArr, listId);
                current = 0;
            }

            //设置当前项的背景色及位置
            if(showList && showList.length!=0){
                $.each(showList, function(index, item){
                    if(index == current) {
                        $('#' + item.id).css('background', '#eee');
                        $('#' + listId).scrollTop($('#' + item.id).get(0).offsetTop);
                    }else {
                        $('#' + item.id).css('background', '');
                    }
                })
            }
            //设置下拉框的高度
            //212为列表框的最大高度
            if(showList && showList.length!=0){
                if(212 > $('#' + listId).find('div').eq(0).height() * showList.length) {
                    $('#' + listId).height($('#' + listId).find('div').eq(0).height() * showList.length);
                }else {
                    $('#' + listId).height(212);
                }
            }
        })
    }

    //绑定事件
    function bindFun(){
        //给下拉箭头绑定点击事件  点击下拉箭头显示/隐藏对应的列表
        //输入框的类名为selectInput
        //下拉箭头的类名为picture_click、dropDowns
        //下拉列表的类名为selectList
        for(var i = 0; i < $('.picture_click').length; i++) {
            $('.picture_click').eq(i).click(function(){
                $(this).parent().find('.selectList').toggle();
            })
        }

        //为列表中的每一项绑定鼠标经过事件
        $('.selectList div').mouseenter(function(){
            $(this).css("background", "#eee").siblings().css("background", "");
        });
        //为列表中的每一项绑定单击事件
        $('.selectList div').bind('click', function(){
            //文本框为选中项的值
            $(this).parent().parent().find('.selectInput').val($(this).html());
            //下拉框隐藏
            $(this).parent().hide();
        });
    }


    function initSearchInput(that, listId) {

        //点击下拉框外部的时候使下拉框隐藏
        var dropDowns = document.getElementsByClassName('dropDowns');
        var selectList = document.getElementsByClassName('selectList');

        document.body.onclick = function(e){
            e = e || window.event;
            var target = e.target || e.srcElement;
            if(target == that){
                $('#' + listId).show();
            }else{
                for(var i = 0; i < dropDowns.length; i++) {
                    if(target != dropDowns[i] && target != selectList[i]){
                        selectList[i].style.display = 'none';
                    }
                }
            }

        }
    }


    function searchText(that, listArr, listId){
        //文本框中输入的字符串
        var searchVal = $(that).val();
        var showList = [];
        if(showList.length== 0 && !$(that).val()){
            //showList为列表中和所输入的字符串匹配的项
            showList = listArr;
        }

        if(searchVal){
            //将和所输入的字符串匹配的项存入showList
            //将匹配项显示，不匹配项隐藏
            $.each(listArr, function(index, item){
                if(item.title.indexOf(searchVal) != -1) {
                    $('#' + item.id).css('display', 'block');
                    showList.push(item);
                }else {
                    $('#' + item.id).css('display', 'none');
                }
            })
        }else{
            showList = listArr;
            $.each(listArr, function(index, item){
                $('#' + item.id).css('display', 'block');
            })
            $(that).siblings('.selectList').find('#nullcon').hide();
        }

        if(showList.length== 0 && $(that).val()){
            $('#' + listId).height(50);
            $(that).siblings('.selectList').find('#nullcon').html('没有找到"'+$(that).val()+'"的内容').show();
        }


        return showList;
    }
    $(".hot-list .hot-item .hot-item-bg").click(function(evt){
        var myVideo = $(evt.currentTarget).closest('.hot-item').find('video')[0];
        if(myVideo.paused){
            $(this).hide();
            myVideo.play();
        }else{
            $(this).show();
            myVideo.pause();
        }
    });
    $(".wonder-list .wonder-item .wonder-item-bg").click(function(evt){
        var myVideo = $(evt.currentTarget).closest('.wonder-item').find('video')[0];
        if(myVideo.paused){
            $(this).hide();
            myVideo.play();
        }else{
            $(this).show();
            myVideo.pause();
        }
    });
	function hits(id) {
        var hotTemp=document.getElementById('hothit'+id);
        var wonTemp=document.getElementById('wonhit'+id);
	    	var result='';

        $.post("{php echo app_url('home/index/video')}",{videoid:id},function(data){
            if (data.errno==1){
                result+='<span class="mui-icon mui-icon-videocam"></span>'+data.hits+'</span>';
                hotTemp.innerHTML=result;
                wonTemp.innerHTML=result;
			}
        },"json");
    }

</script>
	</body>

</html>
